<html>

<head>     

<title>简单贪吃蛇</title>

<style type="text/css">

<!--  

.food{background-color:green}  

 .snake{background-color:red}

-->

</style></head><body onLoad="javascript:createmap();"> 

<script language="javascript">

<!--

var num=15;  //每个格子宽

var rows=20; //行

var cols=30; //列

var borderwidth=5;

var map;

//创建地图

function createmap()

{ 

var x=0;

var y=0;

bw=num*cols+2*borderwidth;

bh=num*rows+2*borderwidth;

document.body.innerHTML='<div id=mainmap style=position:absolute;left:'+(document.body.clientWidth-bw)/2+';top:'+(document.body.clientHeight-bh)/2+';width:'+bw+';height:'+bh+';border-width:'+borderwidth+';border-style:outset;border-color:#0000ff></div>';

map=new Array();

for(y=0;y<rows;y++){ 

map[y]=new Array();  

    for(x=0;x<cols;x++)  

        map[y][x]='0';   

}   

sx=parseInt(Math.random()*cols);  

 sy=parseInt(Math.random()*rows); 

createfood();

createsnake();

alldiv=mainmap.all.tags('DIV');

allspan=mainmap.all.tags('SPAN');

}

//创建食物的位置

function createfood()

{  

fx=parseInt(Math.random()*cols);  

 fy=parseInt(Math.random()*rows);  

if(map[fy][fx]=='0')  

{  

mainmap.innerHTML+='<span style=position:absolute;left:'+fx*num+';top:'+fy*num+';width:'+num+';height:'+num+';overflow:hidden class=food></span>';  

map[fy][fx]='f';  

}  

else  

createfood();

}

//创建蛇的位置

function createsnake()

{ 

mainmap.innerHTML+='<div x='+sx+' y='+sy+' style=position:absolute;left:'+sx*num+';top:'+sy*num+';width:'+num+';height:'+num+';overflow:hidden class=snake></div>'; 

 map[sy][sx]='s';}

//方向监听

document.onkeydown=keydown;

function keydown()

{    

key=event.keyCode; 

switch(key)   {   

case 37://左        

dir(-1,0);       

  break;  

case 38://上        

dir(0,-1);        

break;  

case 39://右       

  dir(1,0);        

 break;  

 case 40://下       

  dir(0,1);       

  break;   

 }   

return false;  

}

var start=0;//游戏开始时状态变量

function dir(x,y)

{    

gox=x;  

goy=y;  

if(start==0)  

{        

start=1;    

  move();  

otimes();  

}

}

//主移动函数

function move()

{ 

sx+=gox; 

 sy+=goy; 

if(sy<0||sy>19||sx<0||sx>29)   

  move1(); 

 else 

{    

 snakefront=map[sy][sx];   

  if(snakefront=='0')   

  move2(); 

else 

{    

  if(snakefront=='f')     

       move3();  

         else     

        move1();  

 }  

 }    

 }

//**********以下为移动时的四种情况****************************

//重新开始游戏function move1()

{  

restart=window.confirm("GAME OVER,重新开始游戏?");  

 if(restart)     

window.location.reload();

}

//前面是空地

var times=200;

function move2()

{  

 map[alldiv[0].y][alldiv[0].x]='0'; 

 alldiv[0].removeNode(true); 

createsnake(); 

 setTimeout('move()',times);

}

//前面是食物

function move3()

{  

createsnake();  

allspan[0].removeNode(true); 

  createfood();  

setTimeout('move()',times);

}

//使游戏速度越来越快

function otimes()

{  

 times-=5;  

 if(times>5)     

 setTimeout('otimes()',5000);

}

</script>

</body>

</html>